<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
 
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
		<style>
		 	.mui-content-padded {
				padding: 10px;
			}
			body,body .mui-content {
				background-color: #fff !important;
			}
			code {
				word-wrap: break-word;
				word-break: normal;
				font-size: 90%;
				color: #c7254e;
				background-color: #f9f2f4;
				border-radius: 4px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">预开下一花色</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded" style="padding-bottom: 50px;">
				<p style="text-indent: 22px;">
					此接口用于测试，通过下方按钮，将下一个花色发送给游戏服务器，本轮游戏开奖即为相应花色
				</p>
				<h4 class="mui-content-padded">发送请求：</h4>
				<div class="mui-input-group">
					<div class="mui-input-row">
						<label>type:</label>
						<select id="next_color">
							<option value="0">♠️</option>
							<option value="1">♥️️</option>
							<option value="2">♣️</option>
							<option value="3">♦️️</option>
							<option value="4">👑️</option>
						</select>
					</div>
					
					<div class="mui-button-row">
						<button type="button" id="confirm" class="mui-btn mui-btn-primary">发送请求</button>
					</div>
				</div>
				<h4 class="mui-content-padded">接下来开奖：</h4>
				<code id="response"></code>
			</div>
			<button id="get_test_card_list" type="button" class="mui-btn mui-btn-success mui-btn-block">刷新查看预开结果</button>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/utils/httpUtils.js"></script>
		<script>
			(function($) {
				$.init({
					swipeBack:true //启用右滑关闭功能
				});
				
				var network = true;
				if(mui.os.plus){
					mui.plusReady(function () {
						if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
							network = false;
						}
					});
				}
				// 初始化 网络工具
				var http_util = new HttpUtils(mui.os.plus);
				
				var next_colorEI = document.getElementById("next_color");
				var respnoseEl = document.getElementById("response");
				//成功响应的回调函数
				var color = {0: "♠️", 1: "♥️", 2: "♣️", 3: "♦️", 4: "👑"};
				var successCallBack = function(response) {
					var code = response.code;
					console.log("code=");
					console.log(code);
					r_text = "";
					if (code == 200){
						test_color_list = response["test_next_color_list"]
						console.log(test_color_list);
						for(i=0;i<test_color_list.length;i++){
							r_text += color[test_color_list[i]];
						}
					} 
					console.log(r_text);
					respnoseEl.innerHTML = r_text;
				};
				//失败时调用

				//设置全局beforeSend
				$.ajaxSettings.beforeSend = function(xhr, setting) {
					//beforeSend演示,也可在$.ajax({beforeSend:function(){}})中设置单个Ajax的beforeSend
					console.log('beforeSend:::' + JSON.stringify(setting));
				};
				//设置全局complete
				$.ajaxSettings.complete = function(xhr, status) {
					console.log('complete:::' + status);
				}
				var ajax = function() {
					//利用RunJS的Echo Ajax功能测试
					var url = 'wxhh/set_next_color';
					//请求方式，默认为Get；
					var next_color_value = next_colorEI.value;
					//预期服务器范围的数据类型
					var dataType ="post";
					//发送数据
					var params = {
						next_color: next_color_value
					}; 
					console.log(next_color_value);
					console.log(params); 
					respnoseEl.innerHTML = '正在请求中...';
					http_util.post(url, params,successCallBack, http_util.errorCB)

				};
				
				//发送请求按钮的点击事件
				document.getElementById("confirm").addEventListener('tap', function() {
					if(network){
						ajax();
					}else{ 
						mui.toast("当前网络不给力，请稍后再试");
					}
				});
				//刷新按钮添加时间请求
				document.getElementById("get_test_card_list").addEventListener('tap', function() {
					if(network){
						ajax();
					}else{ 
						mui.toast("当前网络不给力，请稍后再试");
					}
				});
				
				//点击描述中链接时，打开对应网页介绍；
				$('body').on('tap', 'a', function(e) {
					var href = this.getAttribute('href');
					if (href) {
						if (window.plus) {
							plus.runtime.openURL(href);
						} else {
							location.href = href;
						}
					}
				});
			})(mui);
		</script>
	</body>

</html>